<script type="text/javascript">
    function showData(source,  time_card_id){
        // alert("Source id: " + source.id + "\n Invisible: " +$(source.id).is('invisible'));
        calcUrl = "<?php echo url_for('payperiod/getTimeCards?time_card_id=') ?>" +time_card_id;
        if($('#' +source.id).hasClass('invisible')){
            $('#' +source.id).removeClass('invisible');
            $('#' +source.id).addClass('visible');
            $.ajax({
                url: calcUrl,
                type: 'POST',
                dataType: 'html',
                timeout: 1000,
                error: function(){
                    alert('Error loading TimeCards');
                },
                success: function(data){
                    $("#Timecards_" + source.id).html(data);
                }
            });
            $("#Timecards_" + source.id).show();
            //$("#Timecards_" + source.id).html("Valores de " +source.id)
        }else{
            //alert("Source id: " + source.id + "\n Visible: " +$(source.id).is('visible'));
            $('#' +source.id).removeClass('visible');
            $('#' +source.id).addClass('invisible');
            $("#Timecards_" + source.id).hide();
        }
       

       
    }
    $(document).ready(function(){
        $('#position_monthlySalary').change(function(){
            //calcUrl = "'" + "<?php echo url_for('position/hourlySalaryUpdate?monthlySalary=') ?>" + $('#position_monthlySalary').val() + "'";
            calcUrl = "<?php echo url_for('position/hourlySalaryUpdate?monthlySalary=') ?>" + $('#position_monthlySalary').val() ;
            $('#ajaxResult').load(calcUrl);

            $.ajax({
                url: calcUrl,
                type: 'GET',
                dataType: 'html',
                timeout: 1000,
                error: function(){
                    alert('Error loading XML document');
                },
                success: function(data){
                    $('input[id^="position_hourlySalary"]').val(data);
                }
            });


            // $('input[id^="position_hourlySalary"]').val('54');

            //           msg ="Monthly Salary Changed " + $('#position_monthlySalary').val();
            //          alert(msg);
        });
    });


</script>
<table>
    <tbody>
        <tr>
            <th>Id:</th>
            <td><?php echo $pay_period->getId() ?></td>
        </tr>
        <tr>
            <th>Name:</th>
            <td><?php echo $pay_period->getName() ?></td>
        </tr>
        <tr>
            <th>Start date:</th>
            <td><?php echo $pay_period->getStartDate() ?></td>
        </tr>
        <tr>
            <th>End date:</th>
            <td><?php echo $pay_period->getEndDate() ?></td>
        </tr>
        <tr>
            <th>Payment periodicity:</th>
            <td><?php echo $pay_period->getPaymentPeriodicityId() ?></td>
        </tr>
    </tbody>
</table>
<table>
    <?php foreach ($pay_period->getTimeCard() as $timecard): ?>
        <tr>
            <td class="data_top">
            <?php echo $timecard->getEmployee(); ?>
        </td>
        <td>
            <a href="#" id="Employee_<?php echo $timecard->getEmployee()->getId(); ?>" 
               onclick="showData(this, <?php echo $timecard->getId() ?>)"
               class="invisible">Tarjetas de Tiempo</a>
            <div id="Timecards_Employee_<?php echo $timecard->getEmployee()->getId(); ?>"/>
        </td>
    </tr>
    <?php endforeach; ?>

        </table>
        <hr />

        <a href="<?php echo url_for('payperiod/edit?id=' . $pay_period->getId()) ?>">Edit</a>
        &nbsp;
        <a href="<?php echo url_for('payperiod/index') ?>">List</a>
